<template>
  <div ref="scrollerRef" class="scroller" @scroll="onScroll">
    <slot name="header"></slot>
    <template v-for="(source, index) in list">
      <slot v-bind="{ source, index }"></slot>
    </template>
    <slot name="footer"></slot>
  </div>
</template>
<script lang="ts" setup>
defineProps({
  sizeKey: {
    type: String,
    default: "message"
  },
  loading: {
    type: Boolean,
    default: false
  },
  list: {
    type: Array as PropType<any[]>,
    default: () => []
  }
});

const emit = defineEmits(["scroll", "scroll-start", "scroll-end", "is-scroll-bottom"]);

const scrollerRef = ref();
const onScroll = () => {
  if (!scrollerRef.value) return;
  emit("scroll", scrollerRef.value);
  const { scrollTop, scrollHeight, clientHeight } = scrollerRef.value;

  if (scrollHeight > clientHeight) {
    // 确定产生滚动区
    emit("is-scroll-bottom", scrollTop >= scrollHeight - clientHeight - 20);
  } else {
    emit("is-scroll-bottom", true);
  }
};
const scrollToBottom = () => {
  if (scrollerRef.value) {
    scrollerRef.value.scrollTop = 9999999999;
    // animateScrollTo(scrollerRef.value, scrollerRef.value?.scrollHeight || 999999999, 500);
  }
};
defineExpose({
  scrollerRef,
  scrollToBottom
});
</script>
<style lang="scss" scoped>
.scroller {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.scroller::-webkit-scrollbar {
  width: 8px;
}

.scroller::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 8px;
}
.scroller:hover::-webkit-scrollbar-track {
  background: rgb(229, 229, 229);
  border-radius: 8px;
}

.scroller::-webkit-scrollbar-thumb {
  background: rgb(192, 192, 192);
  border-radius: 8px;
  cursor: pointer;
}

.scroller::-webkit-scrollbar-thumb:hover {
  background: rgb(136, 136, 136);
  border-radius: 8px;
}

.scroller::-webkit-scrollbar-thumb:active {
  background: rgb(136, 136, 136);
  border-radius: 8px;
}
</style>
